{include file="public/header,public/nav,public/fixbar" title="录播-<?php echo request()->pc_info['seo_title']?>"/}
<div class="layui-body">
    <div class="layui-container">
        <div class="layui-col-space10">
            <div class="layui-col-xs12 layui-col-md4 layui-col-lg3">
                <div class="layui-main scrollbar" style="height: 85vh;">
                    <div class="layui-collapse course-catalog" lay-accordion>
                        {foreach $catalog as $v}
                        <div class="layui-colla-item {if $info.catalog_id == $v.id} layui-show {/if}">
                            {if isset($v.children)}
                                <div class="layui-colla-title" style="height: 62px;line-height: 62px;">
                                    <div class="space-between layui-ellip">
                                        <span class="layui-ellips">{$v.name}</span>
                                        <span style="color: #999;">共 {$v.count} 章</span>
                                    </div>
                                </div>
                                <div class="layui-colla-content">
                                    {foreach $v.children as $val}
                                    <div class="space-between catalog-item {if $info.id == $val.id} checked {/if}" style="padding: 5px;">
                                        <sapn class="align-items-center">
                                            <div class="item-title">
                                                {if $val.is_see == 1}
                                                    <span class="item-title-label">试看</span>
                                                {/if}
                                                <span>{$val.name}</span>
                                            </div>
                                        </sapn>
                                        {if $info.is_buy == 1}
                                            <a href="/course/study?product_id={$info.product_id}&content_id={$val.id}"><i class="layui-icon layui-icon-play"></i></a>
                                        {else}
                                            {if $val.is_see == 0}
                                            <i class="layui-icon layui-icon-lock"></i>
                                            {else}
                                            <a href="/course/study?product_id={$info.product_id}&content_id={$val.id}"><i class="layui-icon layui-icon-play"></i></a>
                                            {/if}
                                        {/if}
                                    </div>
                                    {/foreach}
                                </div>
                            {else}
                                <div class="space-between catalog-item {if $info.id == $v.id} checked {/if}" style="padding: 5px;">
                                    <sapn class="align-items-center">
                                        <div class="item-title">
                                            {if $v.is_see == 1}
                                                <span class="item-title-label">试看</span>
                                            {/if}
                                            <span>{$v.name}</span>
                                        </div>
                                    </sapn>
                                    {if $info.is_buy == 1}
                                        <a href="/course/study?product_id={$info.product_id}&content_id={$v.id}"><i class="layui-icon layui-icon-play"></i></a>
                                    {else}
                                        {if $v.is_see == 0}
                                        <i class="layui-icon layui-icon-lock"></i>
                                        {else}
                                        <a href="/course/study?product_id={$info.product_id}&content_id={$v.id}"><i class="layui-icon layui-icon-play"></i></a>
                                        {/if}
                                    {/if}
                                </div>
                            {/if}
                        </div>
                        {/foreach}
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-md8 layui-col-lg9">
                <div class="layui-main" style="height: 85vh;">
                    <a href="javascript:history.go(-1);">
                        <div class="item" style="margin-bottom: 15px;">
                            <img src="{$product.head_imgs[0]}" class="user-course-img">
                            <div class="detail">
                                <div class="product-title layui-ellips">
                                    {$product.name}
                                </div>
                                <p style="margin-top: 5px;">
                                    <span class="layui-btn layui-btn-primary layui-btn-xs">已有 {$product.real_sales+$product.virtual_sales} 人学习</span>
                                    <span class="layui-btn layui-btn-primary layui-btn-xs">共 {$product.class_hour} 章</span>
                                </p>
                                <p class="product-price">
                                    <span class="symbol">￥</span>{$product.sale_price}
                                    <span class="original-price">¥300.00</span>
                                </p>
                            </div>
                        </div>
                    </a>
                    <hr>
                    <div>
                        <h3 style="margin-bottom: 5px;">{$info.name}</h3>
                        {if $info.file_type == 'video' || $info.file_type == 'live_video'}
                            <span class="item-title-label">视频</span>
                        {elseif $info.file_type == 'audio'}
                            <span class="item-title-label">音频</span>
                        {elseif $info.file_type == 'word'}
                            <span class="item-title-label">文档</span>
                        {else}
                            <span class="item-title-label">图文</span>
                        {/if}
                        {if $info.time}
                            <span class="time">
                                <i class="layui-icon layui-icon-time" style="font-size: 14px;"></i> {$info.time}
                            </span>
                        {/if}
                    </div>
                    <div class="course-content">
                        {if $info.file_type == 'video'}
                        <video width="100%" height="100%" controls autoplay loop controlsList="nodownload">
                            <source src="{$info.url}">
                        </video>
                        {elseif $info.file_type == 'audio'}
                        <audio style="width: 100%;padding-top: 60px;" controls autoplay loop controlsList="nodownload">
                            <source src="{$info.url}">
                        </audio>
                        {elseif $info.file_type == 'word' || $info.file_type == 'live_video'}
                            <iframe style="width:100%;height: 100%;" src="{$info.url}"></iframe>
                        {else}
                            <div style="height: 100%;" class="scrollbar">
                                <div class="text-content">
                                    {$info.text_content|raw}
                                </div>
                            </div>
                        {/if}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
<script type="text/javascript">
    layui.use(['element', 'layer'], function(){
            var element = layui.element;
            var layer = layui.layer;
            var $ = layui.$;

            $(function(){
                let content_id = "{$info.id}";
                let product_id = "{$info.product_id}";
                // 验证是否有权限观看课程
                var loading = layer.load();
                $.ajax({
                    url:"/course/study_verify_auth",
                    type:'post',
                    data:{"content_id":content_id, "product_id":product_id},
                    dataType:'JSON',
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success:function(res){
                        layer.close(loading);
                        if(res.code==0){
                            if (res.data == 0) {
                                $(".course-content").html('<div class="layui-empty"><img src="/static/images/nodata/no_course.png"><p>暂无学习/观看权限~</p></div>')
                                layer.confirm('你暂未购买该课程/该章节不支持试看，请你购买后再来观看学习吧！', {
                                    skin: 'layui-layer-radius', // 弹窗主题样式
                                    title : '提示',
                                    area: '420px',
                                    btn: ['去购买', '取消'],
                                },function(index){
                                    location.href = '/course/detail?id='+product_id
                                })
                            }
                        }else{
                            layer.msg(res.msg,{icon: 2,time: 2000});
                        }
                    },
                    error:function(e){
                        layer.close(loading);
                        layer.msg('请求失败'+e.responseText,{icon: 2});
                    },
                });
            })

            // 禁用右键菜单
            document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
                layer.msg('右键菜单已禁用', {icon: 4, time: 1500});
                return false;
            });
            
            // 禁用开发者工具快捷键
            document.addEventListener('keydown', function(e) {
                // 禁用F12
                if (e.key === 'F12') {
                    e.preventDefault();
                    layer.msg('开发者工具已禁用', {icon: 4, time: 1500});
                    return false;
                }
                
                // 禁用Ctrl+Shift+I
                if (e.ctrlKey && e.shiftKey && e.key === 'I') {
                    e.preventDefault();
                    return false;
                }
                
                // 禁用Ctrl+U
                if (e.ctrlKey && e.key === 'u') {
                    e.preventDefault();
                    layer.msg('查看源代码已禁用', {icon: 4, time: 1500});
                    return false;
                }
            });

    });
</script>